body{
  padding: 0;
  margin: 0;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
}

.flex-column{
  flex-direction: column;
}

.flex-1 {
  flex: 1;
}

$loopNum: 31;
@for $i from 1 to $loopNum {
  $size: #{$i}px;
  .m-#{$i}    { margin: $size; }
  .ml-#{$i}  { margin-left: $size; }
  .mr-#{$i}  { margin-right: $size; }
  .mt-#{$i}  { margin-top: $size; }
  .mb-#{$i}  { margin-bottom: $size; }

  .p-#{$i}    { padding: $size; }
  .pl-#{$i}  { padding-left: $size; }
  .pr-#{$i}  { padding-right: $size; }
  .pt-#{$i}  { padding-top: $size; }
  .pb-#{$i}  { padding-bottom: $size; }

  .w#{$i*10} { width: #{$i * 10}px;}
  .w#{$i*100} { width: #{$i * 100}px;}
}

